<template>
  <div class="page-container" :style="{ background: bgcolor }">
    <!-- 顶部导航区域 -->
    <div
      class="navigation"
      ref="navigation"
      :style="{ fontSize: size + 'px', color: indexColor }"
    >
      农业数据实时监控系统
    </div>
    <div @click="changeInfo" class="changeTheme">主题切换</div>
    <!-- 底部大盒子 -->
    <div class="content">
      <!-- 左侧俩个 -->
      <div class="left-content">
        <div class="left-content-top" :style="{ background: pagebgcolor }">
          <v-top></v-top>
        </div>
        <div class="left-content-bottom" :style="{ background: pagebgcolor }">
          <v-harv></v-harv>
        </div>
      </div>
      <!-- 中间俩个 -->
      <div class="center-content" :style="{ background: pagebgcolor }">
        <div class="center-content-top">
          <v-crop></v-crop>
        </div>
        <div class="center-content-bottom" :style="{ background: pagebgcolor }">
          <v-map></v-map>
        </div>
      </div>
      <!-- 右侧俩个 -->
      <div class="right-content" :style="{ background: pagebgcolor }">
        <div class="right-content-top">
          <v-grop></v-grop>
        </div>
        <div class="right-content-bottom">
          <v-total></v-total>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入你封装好的所有组件
import vTop from "./plantingAreaTop";
import vHarv from "./plantingHarvest";
import vCrop from "./cropArea";
import vMap from "./copCoverage";
import vGrop from "./gropGrow";
import vTotal from "./totalArea";
export default {
  data() {
    return {
      bgcolor: "#fff", //整个视图的背景色
      pagebgcolor: "#fff", //页面的颜色
      indexColor: "#333",
      size: 15,
      isShow: true, //用来控制背景主题
    };
  },
  components: {
    vTop,
    vHarv,
    vCrop,
    vMap,
    vGrop,
    vTotal,
  },
  computed: {},
  mounted() {
    this.screen();
    window.addEventListener("resize", () => {
      this.screen();
    });
  },
  destroyed() {
    //移除你的事件监听
    window.removeEventListener("resize", this.screen);
  },
  methods: {
    screen() {
      this.size = this.$refs.navigation.offsetWidth / 50;
    },
    //封装一个修改主题的事件
    changeInfo() {
      //更改开关的值
      this.isShow = !this.isShow;
      if (this.isShow) {
        this.bgcolor = "#fff";
        this.pagebgcolor = "#fff";
        this.indexColor = "#333";
      } else {
        this.bgcolor = "#333";
        this.pagebgcolor = "#100C2A";
        this.indexColor = "#fff";
      }
      //调用一个行动 统一去修改标题
      this.$store.commit('changecolor',this.isShow)
    },
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  /* background-image: url(../../public/static/img/bgc01.png) */
  /* background-color: #333333; */
}
/* 顶部导航样式 */
.navigation {
  flex: 2;
  width: 100%;
  /* background-color: orange; */
  background-image: url(../../public/static/img/top02.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  font-weight: 600;
  color: #000;
  text-align: center;
  /* line-height: 3.2rem; */
}
.content {
  flex: 15;
  display: flex;
}
/* 左侧盒子 */
.content .left-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .left-content .left-content-top {
  width: 95%;
  height: 53%;
  border: 1px solid #38c5ec;
}
.content .left-content .left-content-bottom {
  width: 95%;
  height: 42%;
  border: 1px solid #38c5ec;
}

/* 中间盒子 */
.content .center-content {
  flex: 2;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .center-content .center-content-top {
  width: 95%;
  height: 22%;
  border: 1px solid #38c5ec;
}
.content .center-content .center-content-bottom {
  width: 95%;
  height: 75%;
  border: 1px solid #38c5ec;
}

/* 右侧盒子 */
.content .right-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .right-content .right-content-top {
  width: 95%;
  height: 48%;
  border: 1px solid #38c5ec;
}
.content .right-content .right-content-bottom {
  width: 95%;
  height: 48%;
  border: 1px solid #38c5ec;
}

/* 主题切换 */
.changeTheme {
  color: #4cd964;
  position: fixed;
  top: 0.625rem;
  right: 1.25rem;
}
</style>
